<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" style="margin-right: 5px" @click="createItem" v-permission="'hold.add'">新增
    </el-button>
    <div class="filter-container">
      <el-input style="width: 300px" placeholder="输入工单号或序号按回车" clearable prefix-icon="el-icon-search"
        class="filter-item" @change="queryStringChange" @keyup.enter.native="research" @clear="research"
        v-model="query.queryString"></el-input>
      <el-select class="filter-item" placeholder="请选择拦截状态" v-model="query.hold_status" @change="research">
        <el-option label="拦截中" :value="1"></el-option>
        <el-option label="已解除" :value="2"></el-option>
      </el-select>
      <el-button type="success" plain @click="research" class="filter-item">查询</el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="query.hold_status==1? columns1:columns2 "
      @editItem="editItem" @deleteItem="deleteItem">
      <template v-slot:content="v">
        <template v-if="v.key ==='hold_status'">
          <span v-if="v.row[v.key] == 2" class="text-label bg-gray">已解除</span>
          <span v-else class="text-label bg-blue">拦截中</span>
        </template>
      </template>
      <template v-slot:operation="v">
        <a href="#" class="text-blue" v-show="v.row.hold_status==1" @click.prevent.stop="relieve(v.row)"
          v-permission="'hold.delete'">解除</a>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submitHold"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>

  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'

export default {
  mixins: [commonMixin],
  name: 'hold',
  data: function () {
    return {
      api: this.$api.quahold,
      pageLoading: false,
      submitLoading: false,
      query: {
        page: 1,
        size: 10,
        hold_status: 1,
      },
      tableProps: {
        hideOperations: false,
      },
      list: [],
      name: '品质拦截',
      columns1: [
        { title: '工单号', key: 'mo_no' },
        { title: '流转序号', key: 'serial_number' },
        { title: '工序', key: 'group_name' },
        { title: '拦截状态', key: 'hold_status', width: 90 },
        { title: '拦截人', key: 'hold_by', width: 100 },
        { title: '拦截时间', key: 'hold_time', width: 140 },
        { title: '拦截原因', key: 'hold_reason', width: 140 },
      ],
      columns2: [
        { title: '工单号', key: 'mo_no', width: 140 },
        { title: '流转序号', key: 'serial_number', width: 170 },
        { title: '工序', key: 'group_name', width: 200 },
        { title: '拦截状态', key: 'hold_status', width: 90 },
        { title: '拦截人', key: 'hold_by', width: 100 },
        { title: '拦截时间', key: 'hold_time', width: 140 },
        { title: '拦截原因', key: 'hold_reason', width: 200 },
        { title: '解除人', key: 'release_by', width: 100 },
        { title: '解除时间', key: 'release_time', width: 140 },
        { title: '解除原因', key: 'release_reason', width: 140 },
      ],
      fields: [
        {
          title: '拦截类型',
          key: 'hold_Type',
          name: 'select',
          tips: '',
          options: [
            { label: '按工单拦截', value: '1' },
            { label: '按序号拦截', value: '2' },
            { label: '按工序拦截', value: '3' },
          ],
          events: {
            change: this.holdTypeChange,
          },
          props: {},
          required: true,
        },

        {
          title: '输入序号',
          key: 'input_sn',
          hidden: true,
          required: true,
          events: {
            change: this.serialNoChange,
          },
        },
        {
          title: '待拦截SN',
          key: 'sn_list',
          name: 'dynamicTag',
          hidden: true,
          props: { config: { closable: false } },
        },
        {
          title: '工单号',
          key: 'mo_no',
          props: { disabled: false },
          hidden: false,
          required: true,
          events: {
            change: this.moChange,
          },
        },
        {
          title: '工序',
          key: 'group_id',
          name: 'select',
          hidden: true,
          options: [],
          props: {},
          required: true,
        },
        { title: '拦截原因', key: 'hold_reason', name: 'textarea', required: true },
      ],
      initData: { hold_Type: '1', mo_no: null, sn_list: [] },
      editFormVisible: false,
    }
  },

  methods: {
    submitHold() {
      if (this.data.moError) {
        this.$message.error('工单号有误，请检查')
        return
      } else {
        this.submit()
      }
    },
    clear() {
      this.query.page = 1
      this.total = 0
      this.list = []
    },
    relieve(row) {
      this.$prompt('请输入解除操作的原因', {
        inputErrorMessage: '请输入解除原因',
        inputValidator: (value) => {
          if (!value) {
            this.$message.error('请输入解除原因')
            return false
          }
        },
      }).then(({ value }) => {
        let data = {
          id: row.id,
          release_reason: value,
        }
        this.$request(this.api + 'unhold', data, 'post').then((r) => {
          this.$message.success('解除成功')
          this.getList()
        })
      })
    },
    //序号检查
    serialNoChange(v) {
      this.data.input_sn = this.data.input_sn.trim()
      v = v.trim()
      this.data.mo_no = null
      this.$request(this.$api.wip + 'getsnwip?sn=' + v).then((r) => {
        this.data.mo_no = r[0].mo_no
        this.data.sn_list = r.map((i) => {
          return i.serial_number
        })
        let tmp = this.fields.find((i) => i.key == 'sn_list')
        if (!this.data.sn_list.length) {
          tmp.hidden = true
        } else {
          tmp.hidden = false
        }
      })
    },
    createItem() {
      this.data = _.cloneDeep(this.initData)
      this.editFormVisible = true
      this.holdTypeChange(this.data.hold_Type)
    },
    queryStringChange() {
      this.query.queryString = this.query.queryString.trim()
    },
    holdTypeChange(v) {
      let tmp = this.fields.find((i) => i.key == 'input_sn')
      let tmp2 = this.fields.find((i) => i.key == 'mo_no')
      let tmp3 = this.fields.find((i) => i.key == 'group_id')
      let tmp4 = this.fields.find((i) => i.key == 'sn_list')
      this.data = _.cloneDeep(this.initData)
      this.data.hold_Type = v
      switch (v) {
        case '1':
          tmp.hidden = true
          tmp2.hidden = false
          tmp2.props.disabled = false
          tmp3.hidden = true
          tmp4.hidden = true
          delete this.data.input_sn
          delete this.data.sn_list
          delete this.data.group_id
          break
        case '2':
          tmp.hidden = false
          // tmp4.hidden = false
          tmp2.hidden = false
          tmp2.props.disabled = true
          tmp3.hidden = true
          this.data.mo_no = null
          delete this.data.group_id
          break
        default:
          tmp.hidden = true
          tmp4.hidden = true
          tmp2.hidden = false
          tmp2.props.disabled = false
          tmp3.hidden = false
          delete this.data.input_sn
          delete this.data.sn_list
          break
      }
    },
    moChange(v) {
      this.data.mo_no = this.data.mo_no.trim()
      this.$request(this.$api.mo + 'getinfo?idOrNo=' + v).then((r) => {
        if (!r) {
          this.$message({
            message: '工单号有误!',
            type: 'error',
          })
          this.data['moError'] = true
        } else {
          delete this.data['moError']
        }
      })
    },
  },
  computed: {},
  created: function () {
    this.getList()
  },
  mounted() {
    this.$request(this.$api.group + 'getlistbyuser', { mes_flag: 'Y' }, 'get', true)
      .then((r) => {
        this.setFieldOptions('group_id', r, 'id', 'group_name')
      })
      .catch(() => {})
  },
  watch: {
    'query.hold_status': function (val) {
      if (val == 1) {
        this.tableProps.hideOperations = false
      } else {
        this.tableProps.hideOperations = true
      }
    },
  },
}
</script>

<style scoped>
</style>
